<template>
	<view>
		
		<view class="main">
			
			<view class="top">
				<view style="overflow: hidden;"></view>
				<view class="ipt name" style="margin-top: 20rpx;">
					<text style="margin-left: 30rpx;">店铺名称</text>
					<input type="text" placeholder="请输入店铺名称" style="margin-left: 26rpx; width:400rpx;" v-model="From.name"/>
				</view>
				<view class="ipt">
					<text style="margin-left: 30rpx;color: #2E3437;">让利比</text>
					<picker @change="bindPickerChange" :value="index" :range="array" style="margin-left: 55rpx;width:400rpx;">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="main-image"></image>
				</view>
				<view class="ipt">
					<text style="margin-left: 30rpx;color: #2E3437;">营业时间</text>
					<input type="text" placeholder="请输入营业时间" style="margin-left: 26rpx;width:400rpx;"  v-model="From.time" @click="opentime" disabled/>
				</view>
				<view class="ipt" @click="chooseLocation">
					<text style="margin-left: 30rpx;color: #2E3437;">店铺地址</text>
					<input type="text" placeholder="选择街道小区" style="margin-left: 26rpx;width:400rpx;" disabled  v-model="From.address" />
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/business/Vector%20574%402x.png" mode="" class="main-image"></image>
				</view>
				<view class="ipt">
					<text style="margin-left: 30rpx;color: #2E3437;">联系电话</text>
					<input type="text" placeholder="请输入联系电话" style="margin-left: 26rpx;width:400rpx;"  v-model="From.tel" />
				</view>
				<view class="ipt textarea">
					<text style="margin-left: 30rpx;color: #2E3437;">详细地址:</text>
					<textarea placeholder="请输入详细地址"   v-model="From.address_detail" class="texta"></textarea>
				</view>
			</view>

			<view class="tp">
				<view class="sp" style="margin-top: 20rpx;">店铺LOGO</view>
				<view class="tx">
					1.图片分辨率不超过200*200<br>
					2.大小不超过1M
				</view>
				<view style="margin-left: 30rpx;">
					
					<u-upload 
					ref="storelogoimg"  
					width="160rpx" 
					height="160rpx" 
					max-count="1" 
					:action="uploadUrl" 
					:file-list="storelogoimglist" ></u-upload>
					
				</view>
				<view class="sp" style="margin-top: 40rpx;">店铺封面</view>
				<view class="tx">
					1.图片分辨率不超过200*200<br>
					2.大小不超过5M
				</view>
				<view style="margin-left: 30rpx;">
					<u-upload
					ref="storeimg"  
					width="160rpx" 
					height="160rpx" 
					max-count="1" 
					:action="uploadUrl" 
					:file-list="storeimglist" ></u-upload>
				</view>
				<view class="sp" style="margin-top: 40rpx;">店铺环境图<text style="color: #999999;font-size: 24rpx;font-weight: normal;margin-left: 20rpx;">(可上传多张图片)</text></view>
				<view style="margin-left: 30rpx;margin-top: 16rpx;">
					<u-upload
					ref="storehjimg"  
					width="160rpx" 
					height="160rpx" 
					max-count="999" 
					:action="uploadUrl" 
					:file-list="storehjimglist" ></u-upload>
				</view>
			</view>
			<view class="footer">
				<view style="overflow: hidden;"></view>
				<view class="sp">营业执照</view>
				<view class="tx">
					1.图片分辨率不超过200*200<br>
					2.大小不超过5M
				</view>
				<view style="margin-left: 30rpx;">
					<u-upload
					ref="yyzzimg"  
					width="160rpx" 
					height="160rpx" 
					max-count="1" 
					:action="uploadUrl" 
					:file-list="yyzzimglist" ></u-upload>
				</view>
			</view>
			<view class="footer">
				<view style="overflow: hidden;"></view>
				<view class="sp">店铺详情</view>
				
				<view style="margin-left: 30rpx;">
					<textarea  placeholder="请输入店铺详情"   v-model="From.content" class="infotext" @click="wenhao"></textarea>
				</view>
			</view>
			<view style="width: 100%;height: 20rpx;"></view>
		</view>
		<view class="btn" @click="btn">
			<view style="overflow: hidden;"></view>
			<view class="btn1">
				提交
			</view>
		</view>
		
		<Working-hours ref="TimePickerPopupRef" :value="value" @confirm="confirm" title='营业时间'></Working-hours>
		<u-modal
		v-model="show1" 
		:content="content" 
		@confirm='confirm1' 
		cancel-text='确认' 
		confirm-color='#606266'
		></u-modal>
		 
	</view>
</template>
<script>
	import map from "../../components/TxAddress/qqmap-wx-jssdk";
	export default {
		data() {
			return {
				From:{
					bank_code:''
				},
				flexflag:false,
				BarTop:'',
				BarHeight:'',
				fileList1: [],
				uploadUrl: this.$u.api.user.getUploadUrl(),
				uploadHeader: this.$u.api.user.getUploadHeader(),
				storelogoimglist: [],
				storeimglist: [],
				storehjimglist:[],
				yyzzimglist:[],
				address:{},
				array: ['10%', '20%', '30%'],
				index: 0,
				birthday: ['06', '00', '18', '00'],
				time:'',
				show1:false,
				content:'修改成功!',
			}
		},
		onLoad() {
			this.$u.api.shop.getinfo().then(res =>{
				console.log(res,'我是info');
				if(res.code = 200){
					this.From = res.data
					this.From.bili = this.From.bili+'%'
					this.From.time = this.From.business_starttime + '-' + this.From.business_endtime
					this.storelogoimglist = [{url:res.data.logo}]
					this.storeimglist = [{url:res.data.image}]
					this.storehjimglist = res.data.images?.split(",").map(item => ({ url: item })); 
					this.yyzzimglist = [{url:res.data.yyzz_images}]
					this.array.forEach((item,index) =>{
						if(item == this.From.bili){
							this.index = index
						}
					})
				}
			})
			
			this.$u.api.shop.getStorebili().then(res =>{
				if(res.code == 200){
					this.array = res.data?.bilidata
				}
			}).catch(req =>{
				if(req.data.code == 500){
					// uni.navigateTo({
					// 	url:'./outcome'
					// })
				}
			})
		},
		onReady() {
		        
		},
		methods:{
			wenhao(){
				console.log('问好');
			},
			opentime(){
				this.open();
			},
			confirm(data) {
			    this.time=`上午${data[0]}:${data[1]}-下午${data[2]}:${data[3]}`
				this.From.time = `${data[0]}:${data[1]}-${data[2]}:${data[3]}`
				this.From.business_starttime = `${data[0]}:${data[1]}`
				this.From.business_endtime = `${data[2]}:${data[1]}`
			},
			open() {
			    this.$refs.TimePickerPopupRef.open();
			},
			confirm1(){
				uni.navigateBack({
						delta: 1,
				})
				this.show1=false
			},
			btn(){
				let storelogoimglist = '';
				let storeimglist = '';
				let storehjimglist = [];
				let yyzzimglist = '';
				let hasUploadlogo = false
				let hasUploadstore = false
				let hasUploadstorehj = false
				let hasUploadyyzz = false
				this.$refs.storelogoimg.lists.forEach(item => {
					
					if(item.progress < 100){
						hasUploadlogo = true
						return true
					}
					if(item?.response == undefined && item?.url){
						storelogoimglist = item.url
						return true
					}
						
					storelogoimglist = item.response.data.url
					console.log(storelogoimglist,'我是storelogoimg');
				})  
				this.$refs.storeimg.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadstore = true
						return true
					}
					if(item?.response == undefined && item?.url){
						storeimglist = item.url
						return true
					}
						 
					storeimglist = item.response.data.url
				})
	
				this.$refs.storehjimg.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadstorehj = true
						return true
					}
					if(item?.response == undefined && item?.url){ 
						storehjimglist.push(item.url)
						return true
					}
					
					
					storehjimglist.push(item.response.data.url)
				})
				this.$refs.yyzzimg.lists.forEach(item => {	
					if(item.progress < 100){
						hasUploadyyzz = true
						return true
					}
					if(item?.response == undefined && item?.url){
						yyzzimglist = item.url
						return true
					}
					yyzzimglist = item.response.data.url
				})
				if(hasUploadlogo || hasUploadstore || hasUploadstorehj || hasUploadyyzz){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				this.storelogoimglist = storelogoimglist;
				this.storeimglist = storeimglist;
				this.storehjimglist = storehjimglist.join(',');
				this.yyzzimglist = yyzzimglist;
				console.log(`form.name:${this.From.name} ,form.tel:${this.From.tel}  form.address:${this.From.address}   form.address_detail:${this.From.address_detail}  form.bank_code:${this.From.bank_code}    `);
				if(this.From.name&&this.From.tel&&this.From.address&&this.From.address_detail){
					let obj = {}
					obj.logo = this.storelogoimglist
					obj.image = this.storeimglist
					obj.images = this.storehjimglist
					obj.yyzz_images = this.yyzzimglist
					obj.bili = this.array[this.index]
					obj.address_city = this.From.address_city
					obj.name = this.From.name
					obj.business_starttime = this.From.business_starttime
					obj.business_endtime = this.From.business_endtime
					obj.address = this.From.address
					obj.tel = this.From.tel
					obj.address_detail = this.From.address_detail
					obj.content = this.From.content
					this.$u.api.shop.Changeinfo(obj).then(res =>{
						if(res.code == 200){
							this.show1=true
						
						}
						
					}).catch(req =>{
						if(req.data.code == 500){
							uni.showToast({
								title: '审核中！',
								icon: 'error',
								duration: 2000
							})  
						
						}
					})
				}else{
					uni.showToast({
						title: '请正确填写资料!',
						icon: 'error',
						duration: 2000
					})  
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						
						
						let mapsdk = new map({
								key: 'CMEBZ-IKFLI-YRLGA-U4TMG-7XPUH-TLFBQ' // 必填
									});
						mapsdk.reverseGeocoder({
										location: {
										latitude: res.latitude,
										longitude: res.longitude
										},
								success: (req) => {
								_this.From.address_city = req.result.ad_info.province+'/'+req.result.ad_info.city+'/'+req.result.ad_info.district
								},
								fail: (error) => {console.log(error,'我是佛山');	}
						});
						console.log(res)
						_this.From.address = res.name
						_this.address.addressAddress = res.address
						_this.From.latitude = res.latitude
						_this.From.longitude = res.longitude
					},
					fail: function(err) {
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event,'什么啊');
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result =  this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://api.yhflxh.com/api/applet/user/uploadImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header:{
							'token':that.vm.vuex_token
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log('我是谁',res);
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		},
		
	}
</script>

<style>
	
	.main{width: 690rpx;margin-left: 30rpx;z-index: 10;}
	.top{width: 690rpx;height: 720rpx;background-color: white;margin-top: 30rpx;border-radius: 16rpx;}
	.ipt{color: #2E3437; position: relative;border-radius: 16rpx; display: flex;width: 650rpx;height: 88rpx;margin-left: 30rpx;margin-left: 20rpx; align-items: center;font-size: 28rpx;}
	.name{margin-top: 40rpx;}
	.main-image{width: 8rpx;height: 14rpx;position: absolute;right: 30rpx;bottom: 42rpx;}
	.tp{width: 690rpx;margin-top: 20rpx;background-color: white;border-radius: 16rpx;}
	.sp{font-family: PingFang SC-Bold;font-size: 28rpx;font-weight: bold;color: black;margin-top: 30rpx;margin-left: 30rpx;}
	.tx{margin-top: 16rpx;font-size: 24rpx;color: #999999;margin-left: 30rpx;line-height: 40rpx;}
	.footer{width: 690rpx;margin-top: 20rpx;background-color:  white;border-radius: 16rpx;}
	.btn{width: 100%;height: 136rpx;background-color: white;margin-top: 30rpx;}
	.btn1{width: 690rpx;height: 88rpx;margin-top: 24rpx;margin-left: 30rpx;border-radius: 44rpx;background-color: #36BE6A;text-align: center;line-height: 88rpx;font-size: 32rpx;font-weight: bold;color: white;}
	.tx1{position: absolute;top: 230rpx;left: 0; width: 100%;text-align: center;font-size: 44rpx;font-weight: bold;color: black;z-index: 999;}
	.tx2{position: absolute;top: 290rpx;left: 0; width: 100%;text-align: center;font-size: 28rpx;z-index: 999;}
	.Cbtn{width: 432rpx;height: 72rpx;background-color:rgba(54, 190, 106, 1) ;color: white;border-radius: 36rpx;text-align: center; font-size: 28rpx;line-height: 72rpx;}
	.jz{width: 100%;position: absolute;left: 0rpx;bottom: 50rpx;display: flex;justify-content: center;}
	.tx3{position: absolute;top: 330rpx;left: 0; width: 100%;text-align: center;font-size: 28rpx;z-index: 999;}
	.tp123{height: 560rpx;width: 540rpx;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
	.textarea{height: 200rpx;display: flex;flex-wrap: wrap;}
	.texta{
		margin-left:30rpx;
		width: 600rpx;
		display: block;
		height: 100rpx;
		margin-top: 0;
	}
	.infotext{
		/* border: 1px solid; */
		height: 144rpx;
		width: 630rpx;
		margin-top: 10rpx;
	}
</style>